<template>
	<view class="container">
		<view class="m-top u-flex u-col-center u-row-between">
			<view class="l" @click="$pageTo(`/pages/user/moneyList`)">
				<view class="l-t">
					<view class="tr">
						<text>商人币</text><uni-icons type="right" size="16" color="#FF6F07"></uni-icons>
					</view>
					<view class="tm">
						{{$numToLocaleString(coin)}}
					</view>
				</view>
				<view class="p">
					可用于解锁信息
				</view>
			</view>
			<view class="r">
				<image src="@/static/money.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="m-middle">
			<view class="t">
				商人币充值
			</view>
		<!-- 	<view class="input">
				<input type="number" v-model="money" placeholder="请输入金额"
					placeholder-style="color: #D1CDCD;font-size: 28rpx;" />
			</view> -->
			<view class="m-middle-flex">
				<view class="items" v-for="(item,index) in btnList" :key="index"
				@click="changePrice(item)" :class="item.isclick?'active':''">
					<view class="items_f">
						<!-- <image src="/static/pay.png" mode=""></image> -->
						<view class="texts">
							{{item.dictLabel}}
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="pay">
				去充值
			</view>
		</view>
		<view class="btn1" @click="$pageTo(`/pages/user/moneyList`)">
			流水账单
		</view>
		<view class="m-footer">
			<view class="t">
				<image src="@/static/moneyt.png" mode="aspectFill"></image>
			</view>
			<view class="m u-flex u-col-center u-row-between">
				<image src="@/static/moneyl.png" mode="aspectFill"></image>
				<view class="con">
					<view class="h">
						发布报价
					</view>
					<view class="p">
						商人币使用说明
					</view>
				</view>
			</view>
			<view class="body">
				<view class="" v-html="content">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserinfo,
		webconfig,
		coinRecharge,
		getdict
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				isios:uni.getStorageSync('isios'),
				coin: 0,
				money: "",
				content: "",
				btnList:[]
			}
		},
		onShow() {
			this.getwebconfig()
			this.getUser()
			getdict('user_pay_coin_amount').then(res=>{
				res.data.forEach(item=>{
					item.isclick = false
				})
				this.btnList = res.data
			})
		},
		methods: {
			changePrice(item){
				this.btnList.forEach(item=>{
					item.isclick = false
				})
				item.isclick = true
				this.money = item.dictValue
				console.log(item);
			},
			getwebconfig() {
				webconfig({}).then(res => {
					if (res.code == 200) {
						this.content = res.data.coinrule
					}
				})
			},
			getUser() {
				getUserinfo({}).then(res => {
					if (res.code == 200) {
						this.coin = res.data.coin
					}
				})
			},
			pay() {
				if(this.isios){
					uni.showToast({
						icon: "none",
						title: "ios 暂不支持购买",
					});
					return
				}
				if (!this.money) {
					this.$modal.msg('充值金额不能为空')
					return
				}
				uni.showLoading({
					title: '支付拉起中...'
				})
				coinRecharge({
					coin: parseFloat(this.money),
					price: parseFloat(this.money),
					paytype: 1,
				}).then(res => {
					if (res.code == 200) {
						// #ifdef MP-TOUTIAO
						let byteAuthorization = res.data.byteAuthorization
						let data = res.data.data
						tt.requestOrder({
							data: JSON.stringify(data), // 开发者服务端返回的data示例
							byteAuthorization: byteAuthorization, // 开发者服务端返回的byteAuthorization
							success: (res) => {
								const {
									orderId
								} = res;
								tt.getOrderPayment({
									orderId: orderId, // 替换为抖音开放平台内部的交易订单号
									success: (res) => {
										tt.showToast({
											icon: "success",
											title: "支付成功",
										});
										this.getUser()
										this.money = ''
									},
									fail: (res) => {
										tt.showToast({
											icon: "fail",
											title: "支付失败",
										});
									},
								});
							},
							fail: (res) => {},
						});
						// #endif
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color: #FF6F07;

	.container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff !important;

		&::after {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			content: '';
			height: 440rpx;
			background: linear-gradient(180deg, #FFF2E9 0%, #FFFEFE 100%);
			z-index: 1;

		}
.btn1 {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			margin: 0rpx auto 60rpx;
			border-radius: 20rpx;
			color: #FF6F07;
			font-size: 32rpx;
			font-weight: 600;
			border: 1px solid #FF6F07;
		}
		.m-footer {
			position: relative;
			z-index: 99;

			.t {
				width: 202rpx;
				height: 58rpx;
				margin: 0 auto 60rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.m {
				image {
					width: 80rpx;
					height: 80rpx;
				}

				.con {
					flex: 1;
					width: 1rpx;
					margin-left: 20rpx;

					.h {
						font-size: 28rpx;
						color: #000;
						height: 40rpx;
						line-height: 40rpx;
					}

					.p {
						font-size: 24rpx;
						color: #C0C0C0;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
			}

			.body {
				margin-top: 60rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #979797;
			}
		}

		.m-middle {
			margin-top: 20rpx;
			position: relative;
			z-index: 99;
			.m-middle-flex{
				width: 100%;
				margin-top: 30rpx;
				display: grid;
				flex-wrap: wrap;
				grid-template-columns: repeat(3,auto);
				grid-gap: 15rpx;
				// overflow-x: auto;
				// white-space:nowrap;
				.items{
					width: 216rpx;
					height: 100rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 1px solid #D9D9D9;
					// margin-right: 15rpx;
					line-height: 100rpx;
					text-align: center;
					image{
						width: 28rpx;
						height: 28rpx;
					}
					.texts{
						font-family: "DIN";
						font-weight: bold;
						font-size: 32rpx;
						color: #11192D;
						margin-left: 20rpx;
					}
				}
				.active{
					width: 216rpx;
					height: 100rpx;
					background: linear-gradient( 180deg, #FFE7D7 0%, #FFFEFE 100%);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 1px solid #FF6F07;
				}
			}

			.t {

				height: 44rpx;
				line-height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #11192D;
				text-align: left;
				position: relative;
				z-index: 99;

				&:after {
					content: '';
					position: absolute;
					left: 60rpx;
					bottom: -10rpx;
					width: 48rpx;
					height: 4rpx;
					background: $color;
					border-radius: 2rpx;

				}
			}

			.input {
				width: 100%;

				background: #FFFFFF;
				border-radius: 12rpx;
				border: 2rpx solid #D9D9D9;
				margin-top: 40rpx;
				padding: 20rpx;
				box-sizing: border-box;

				input {
					height: 60rpx;
					line-height: 60rpx;
					color: #333;
					font-size: 28rpx;
				}
			}

			.btn {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				margin: 30rpx auto 20rpx;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
				border-radius: 20rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: 600;
			}
		}

		.pclass {
			font-size: 28rpx;
			color: #C0C0C0;
		}

		.m-top {
			position: relative;
			z-index: 99;
			.l {
				position: relative;
				z-index: 3;
				flex: 1;
				width: 1rpx;
				.l-t {
					.tm {

						font-family: "DIN";
						font-weight: bold;
						font-size: 120rpx;
						color: #11192D;
						text-align: left;
						height: 160rpx;
						line-height: 160rpx;
					}
					.tr {

						height: 60rpx;
						line-height: 60rpx;

						text {
							font-size: 28rpx;
							color: #11192D;
						}
					}
				}

				.p {
					margin-top: 20rpx;
					line-height: 30rpx;
					height: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #C1C1C1;
					text-align: left;
				}
			}

			.r {
				width: 273rpx;
				height: 248rpx;
				position: relative;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>